<script setup>
import { queryMateriel, queryProductMessage } from '@/api/Base/repositoryManager';
import { sum } from 'lodash-es';
import 'md-editor-v3/lib/style.css';
import { MdPreview } from 'md-editor-v3';
import PrinterSelector from '@/components/PrinterSelector.vue';
import AdjustQuantityDialog from '@/components/AdjustQuantityDialog.vue'

const selectedPrinter = ref()
const printerSelectorRef = ref()
const showPrinterPopup = () => {
    printerSelectorRef.value?.show()
}

definePage({
    name: 'productInfo',
    meta: {
        level: 2,
        title: '产品详细',
    },
})
const dialogRef = ref()

const route = useRoute()
const router = useRouter()

const ProductInfoObj = reactive({
    Product: {},
    reload: () => {
        load.value = true
        queryProductMessage({
            "productNumber": route.query.id
        }).then(res => {
            ProductInfoObj.Product = res.data
            load.value = false
        })
    }
})
onMounted(() => {
    ProductInfoObj.reload()
})
function onBack() {
    if (window.history.state.back)
        history.back()
    else
        router.replace('/')
}
const openDialog = () => {
    dialogRef.value?.open()
}

const load = ref(true)
</script>

<template>

    <div class="card m-[4rem] flex flex-col gap-[10px] mt-[70px]">
        <van-loading v-if="load" vertical>
            <template #icon>
                <van-icon name="star-o" size="30" />
            </template>
            加载中...
        </van-loading>
        <div class="flex flex-col gap-[10px] overflow-y-scroll" v-if="!load">
            <EImage :height="'334px'" class=" shadow-sm" :photo-url="ProductInfoObj.Product?.product?.sPhotoUrl" />
            <div class="rounded-[10px] relative shadow-sm w-[100%] bg-white p-[10px]">
                <el-button class="absolute right-10 top-10" @click="showPrinterPopup">打印</el-button>
                <PrinterSelector ref="printerSelectorRef" :printContent='{
                    label: {
                        "label_type": "qr",
                        "printer": "office",
                        "tape": "9mm",
                        "fontname": "mono",
                        "size": "small",
                        "align": "right",
                        "qrtext": ProductInfoObj.Product.product.sProductNo,
                        "lines": [
                            ProductInfoObj.Product.product.sProductNo,
                        ]
                    },
                    count: 2
                }' v-model="selectedPrinter" />
                <h1 class="text-[18px] leading-none">{{
                    JSON.parse(ProductInfoObj.Product.product.sProductClass).join(",") +
                    JSON.parse(ProductInfoObj.Product.product.sProductPublicClass).join(",") + "," +
                    ProductInfoObj.Product.product.sProductName
                }} </h1>
                <h2 class="text-[15px] leading-none text-coolgray">料号:{{ ProductInfoObj.Product.product.sProductNo }}
                </h2>
                <h2 class="text-[15px] leading-none text-coolgray">推荐等级:{{
                    ProductInfoObj.Product.product.sRecommendGrade }}
                </h2>
                <h2 class="text-[15px] leading-none text-coolgray">控制等级{{ ProductInfoObj.Product.product.nControlLevel
                    }}</h2>
                <h2 class="text-[15px] leading-none text-coolgray">类型:{{ ProductInfoObj.Product.product.nProductType }}
                </h2>
                <h1 class="w-[100%] text-right text-coolgray text-[10px] leading-none">
                    库存{{ sum(ProductInfoObj.Product.quantityMessage.map(item => {
                        return item.nType == 0 ? item.nQuantity : 0
                    })) }}件</h1>


            </div>
            <div class="rounded-[10px] shadow-sm w-[100%] bg-white p-[10px]">
                <h2 class="text-[15px] leading-none text-coolgray">功能/参数:{{
                    ProductInfoObj.Product.product.sProductDescription
                    }}</h2>
                <h2 class="text-[15px] leading-none text-coolgray">备注:{{ ProductInfoObj.Product.product.sRemark }}</h2>
                <h2 class="text-[15px] leading-none text-coolgray">产品文档:</h2>
                <MdPreview :modelValue="ProductInfoObj.Product.product.sProductDocument" />
            </div>
        </div>
        <AdjustQuantityDialog ref="dialogRef" :productNo="route.query.id" />
        <StepBottom>
            <template #default>
                <el-button class="step-bottom-button flex flex-col justify-center items-center text-white" @click="() => {
                }">修改</el-button>
                <el-button class="step-bottom-button flex flex-col justify-center items-center text-white"
                    @click="openDialog">调增调减</el-button>
            </template>
        </StepBottom>
    </div>
</template>

<style lang="less" scoped>
.card {
    border-radius: 5px;
    opacity: 1;
}
</style>
